<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "EChartComponent",
  props:['option'],
  methods:{
    initEcharts() {
      this.timer = setTimeout(()=>{
        echarts.init(this.$refs.chart).setOption(this.option)
      },200)
    }
  },
  mounted() {
    this.initEcharts()
  },
  beforeDestroy() {

  },
  watch:{
    option() {
      this.initEcharts()
    }
  }
}
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
